<script setup lang="ts">
import { ref, computed } from 'vue';
import type { Ref } from 'vue';
import loginFooterCom from '@/components/loginFooterCom.vue';

const checked: Ref<boolean> = ref(false)
const usertel: Ref<string> = ref('')
const flag = computed(() => {
    return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(usertel.value) != true
})
import { useRouter } from 'vue-router';
const router = useRouter()
import { showToast } from 'vant';
//获取验证码
function step1() {
    if (checked.value == true) {
        router.push('/login/code')
        localStorage.setItem('usertel', usertel.value)//存手机号
    } else {
        showToast('请勾选同意用户协议 、隐私政策和儿童保护政策！')
    }
}


function onclickFn() {
    history.back()
}
</script>
<template>
    <div class="content">
        <div class="header">
            <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onclickFn" />
        </div>
        <div class="nr">
            <p class="login-appname">登录应用名称</p>
            <span class="start">开始趣味学习体验</span>
            <!-- 可以使用 CellGroup 作为容器 -->
            <van-cell-group inset>
                <van-field v-model="usertel" type="number" placeholder="请输入手机号"
                    style="background-color: #f7f7f7;width: 80vw;" />
            </van-cell-group>

            <van-button :disabled="flag" color="#265AE8" class="phoneLogin" @click="step1">获取验证码</van-button>


            <p class="warning">未注册手机号登陆时将自动注册</p>
            <van-checkbox v-model="checked" name="a" class="policy">同意 <span>用户协议 、隐私政策</span>和
                <span>儿童保护政策</span></van-checkbox>


            <loginFooterCom></loginFooterCom>
        </div>

    </div>
</template>
<style lang="scss" scoped>
.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .login-appname {
        font-size: 0.2rem;
    }

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
    }

    .phoneLogin {
        margin-top: 4vw;
        margin-bottom: 4vw;
    }

    .van-button {
        width: 80vw;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        line-height: 44px;
    }

    .warning {
        font-size: 0.12rem;
        color: #C1C4C8;
    }
}

.policy {
    margin-top: 4vw;
}
</style>